<template>
	<div>
		<a-modal :visible="visible" title="商圈信息" width="700px" @ok="handleCancel" @cancel="handleCancel">
			<div class="grade-wraper" v-loading="loading">
				<div class="title">商圈基础信息</div>
				<ul>
					<li>
						<span class="label"> 商圈名称: </span>
						<span>{{ businessInfo.fenceName }}</span>
					</li>
					<li>
						<span class="label"> 地址: </span>
						<span>{{ businessInfo.address }}</span>
					</li>
					<li>
						<span class="label"> 类别: </span>
						<span>{{ businessInfo.fenceType }}</span>
					</li>
				</ul>

				<div class="title">统计和明细</div>
				<ul>
					<li v-for="item in CoreIndicateOption" :key="item.value">
						<div class="flex">
							<span class="label"> {{ item.label }}: {{ item.num || 0 }}</span>
							<a-button type="link" @click="checkDetail(item)"
								v-if="item.value != CoreIndicateEnum.StopingDrivers">
								查看详情
							</a-button>
						</div>
					</li>
				</ul>

				<div class="title">潜力预测</div>
				<ul>
					<li>
						<span class="label"> 市占率: </span>
						<span>{{ businessInfo.marketShare }}</span>
					</li>
					<li>
						<span class="label"> 线下货源预测: </span>
						<span>{{ businessInfo.predictNewShipperNum }}</span>
					</li>
				</ul>
			</div>

			<template slot="footer">
				<div class="footer-container">
					<span></span>
					<a-button type="primary" @click="handleCancel">关闭</a-button>
				</div>
			</template>
		</a-modal>
	</div>
</template>

<script>
import moment from "moment";
import UrbanService from "@/service/urban-map.service";
import { CoreIndicateOption, CoreIndicateEnum } from "@/model/city-map.enum";

export default {
	name: 'Business-district',
	props: {
		visible: {
			type: Boolean,
			default: () => false,
		},
		pageState: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			CoreIndicateOption,
			CoreIndicateEnum,
			loading: false,
			businessInfo: {}
		}
	},
	mounted() {
	},
	methods: {
		async init() {
			try {
				this.loading = true;
				const params = {
					uuid: this.pageState.uuid, //"31b9c347e33036b55b4ec3dc3b87f137",
					searchDate: moment(this.pageState.searchForm.searchDate).format("YYYYMMDD")
				};
				const data = await UrbanService.aoiInfo(params);
				this.businessInfo = data;
				this.CoreIndicateOption.forEach(item => {
					if (item.value == CoreIndicateEnum.SendGoods) {
						item.num = data.cargoNum
					}
					if (item.value == CoreIndicateEnum.CompletionQuantity) {
						item.num = data.cargoCompleteNum
					}
					if (item.value == CoreIndicateEnum.DriverNums) {
						item.num = data.driverNum
					}
					if (item.value == CoreIndicateEnum.ShipnerNums) {
						item.num = data.shipperNum
					}
					if (item.value == CoreIndicateEnum.StopingDrivers) {
						item.num = data.stayDriver
					}
					if (item.value == CoreIndicateEnum.StopingDriversCount) {
						item.num = data.stayDriverNum
					}
				})
			} catch (error) {
				this.businessInfo = {};
			} finally {
				this.loading = false;
			}

		},
		handleCancel() {
			this.$emit('update:visible', false);
		},
		checkDetail(row) {
			this.pageState.selectedObj = row;
			this.$emit('checkDetail');
		}
	}
}

</script>
<style scoped>
.grade-wraper {
	margin: -20px;
	margin-top: 0;
}

.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 36px;
}

.title {
	background-color: #f6f6f7;
	padding: 16px;
}

.label {
	display: inline-block;
	min-width: 100px;
	font-weight: bold;
}

li {
	list-style: none;
	margin-bottom: 8px;
}

ul {
	padding: 0;
	margin: 0;
	padding-left: 16px;
	margin: 8px 0;
}
</style>
